<template>
  <el-container class="firstContainer">
    <el-header>
      <Menu class="menuDom" />
    </el-header>
    <el-main style="padding: 0 30px 30px 30px">
      <router-view />
    </el-main>
    <el-footer>
      <Footer class="footerDom" />
    </el-footer>
  </el-container>
</template>
<script setup>
import Menu from "@/components/Menu.vue";
import Footer from "@/components/Footer.vue";
</script>
<style scoped lang="scss">
.el-header {
  background-color: #0c4270;
  // padding: 0 20% !important;
}

::v-deep .el-main {
  /* padding: 20px 180px !important; */
  overflow: visible !important;
  margin: 0 auto;
  width: 1400px;
}

.firstContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ::v-deep .el-menu-item:first-child{
  padding-left: 0 !important;
} */
.el-footer {
  background-color: #0c4270;
  height: 125px;
  overflow: hidden;
  color: #fff !important;
}

::v-deep .footerDom {
}

@media (max-width: 1100px) {
  .el-header {
    height: 120px !important;

    ul {
      border: none !important;
    }
  }
}
</style>
